<template>
  <div 
    v-if="visible"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
    @click.self="onCancel"
  >
    <div class="bg-white rounded-2xl shadow-2xl max-w-sm w-full mx-4 overflow-hidden animate-scale-in">
      <!-- 头部图标 -->
      <div class="flex justify-center pt-6 pb-4">
        <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center">
          <AlertTriangle class="w-8 h-8 text-orange-500" />
        </div>
      </div>
      
      <!-- 内容 -->
      <div class="px-6 pb-6">
        <h3 class="text-lg font-semibold text-gray-900 text-center mb-2">
          {{ t('components.exit_dialog.title') }}
        </h3>
        <p class="text-sm text-gray-600 text-center mb-6">
          {{ t('components.exit_dialog.message') }}
        </p>
        
        <!-- 按钮 -->
        <div class="flex space-x-3">
          <button
            @click="onCancel"
            class="flex-1 px-4 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-colors"
          >
            {{ t('components.exit_dialog.cancel') }}
          </button>
          <button
            @click="onConfirm"
            class="flex-1 px-4 py-3 bg-red-500 hover:bg-red-600 text-white font-medium rounded-lg transition-colors"
          >
            {{ t('components.exit_dialog.confirm') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AlertTriangle } from 'lucide-vue-next'
import { useI18n } from '@/composables/useI18n'

const { t } = useI18n()

interface Props {
  visible: boolean
}

interface Emits {
  (e: 'confirm'): void
  (e: 'cancel'): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

const onConfirm = () => {
  emit('confirm')
}

const onCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

/* 确保在移动端点击背景能正确关闭 */
@media (max-width: 640px) {
  .bg-black\/50 {
    touch-action: none;
  }
}
</style> 